<script setup>
import { ref, onMounted } from 'vue';
const percentages = ref([0, 0, 0, 0, 0])
const targetPercentages = [
  Math.round(300 / 400 * 100),
  Math.round(320 / 400 * 100),
  Math.round(340 / 400 * 100),
  Math.round(360 / 400 * 100),
  Math.round(390 / 400 * 100)
]
onMounted(() => {
  const duration = 1200;
  const startTime = Date.now();

  const animate = () => {
    const elapsed = Date.now() - startTime
    const progress = Math.min(elapsed / duration, 1)

    // 更新所有百分比值
    for (let i = 0; i < percentages.value.length; i++) {
      percentages.value[i] = Math.floor(targetPercentages[i] * progress)
    }

    if (progress < 1) {
      requestAnimationFrame(animate)
    } else {
      // 确保最终值准确
      percentages.value = [...targetPercentages]
    }
  }

  animate()
})
</script>

<template>
  <div class="co">
    <ul>
      <li class="p1">{{ $t("part1") }}<span class="percentage">{{ percentages[0] }}%</span></li>
      <li class="p2">{{ $t("part2") }}<span class="percentage">{{ percentages[1] }}%</span></li>
      <li class="p3">{{ $t("part3") }}<span class="percentage">{{ percentages[2] }}%</span></li>
      <li class="p4">{{ $t("part4") }}<span class="percentage">{{ percentages[3] }}%</span></li>
      <li class="p5">{{ $t("part5") }}<span class="percentage">{{ percentages[4] }}%</span></li>
    </ul>
  </div>
</template>

<style scoped>
.co {
  position: absolute;
  top: 70px;
  width: 90%;
  height: 80%;
  background-color: var(--bgcolor);
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.percentage {
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: var(--progress-color);
  left: 25vw;
  top: 0.5vw;
  transition: opacity 0.3s;
}

ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  margin-top: -60px;
  width: 500px;
}

li {
  list-style: none;
  color: var(--txcolor);
  font-size: 18px;
  margin: 66px 0;
  position: relative;
}

li::before,
li::after {
  content: "";
  display: block;
  height: 16px;
  width: 400px;
  background-color: #1f4a59;
  position: absolute;
  bottom: -28px;
  border-radius: 6px;
}

li::before {
  box-shadow: 0 0 6px rgba(75, 207, 250, 0.2);
}

li::after {
  background-image: linear-gradient(90deg, #0fbcf9, #34e7e4);
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.p1::after {
  animation-name: p1;
}

.p2::after {
  animation-name: p2;
}

.p3::after {
  animation-name: p3;
}

.p4::after {
  animation-name: p4;
}

.p5::after {
  animation-name: p5;
}

@keyframes p1 {
  0% {
    width: 0;
  }

  100% {
    width: 300px;
  }
}

@keyframes p2 {
  0% {
    width: 0;
  }

  100% {
    width: 320px;
  }
}

@keyframes p3 {
  0% {
    width: 0;
  }

  100% {
    width: 340px;
  }
}

@keyframes p4 {
  0% {
    width: 0;
  }

  100% {
    width: 360px;
  }
}

@keyframes p5 {
  0% {
    width: 0;
  }

  100% {
    width: 390px;
  }
}
</style>